<template>
  <div class="container">
    <Gheader></Gheader>
    <div class="main-container">
      <div class="left">
        <navLeft></navLeft>
      </div>
      <div class="right">
        <div  id="mainRightContainer" style="background: #fff;margin: 10px;height:calc(100% - 20px);">
          <router-view/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import navLeft from './frame/nav.vue'
  import Gheader from './frame/header.vue'

  export default {
      name:"index",
      components:{
          navLeft, Gheader
      }
  }



</script>

<style scoped>
  .container{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #eee;
  }
  .main-container{
    display: flex;
    flex:1;
  }
  .left{
    width: 20%;
    background: #eee;
    border-right: 1px solid #fff;
    height: 100%;
  }
  .right{
    width: 80%;
    background: #eee;
  }
</style>
